<template>
    <div class="post-box">
        <div class="avatar_box" style="background-color:#fafafa">
            <img src="https://image.16pic.com/00/05/60/16pic_560199_s.jpg?imageView2/0/format/png" style="width:4rem" />
        </div>
        <el-form class="border shadow-lg" style="border-radius:40px; height:300px;width:400px;background-color:#d9d9d9;margin-left:50px">
            <el-form-item>
                <div class="fs-5 mx-auto mt-4">贴子发布</div>
            </el-form-item>
            <el-form-item>
                <el-input class="w-50 mx-auto" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input class="w-75 mx-auto" placeholder="内容不能为空" style="height:100px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="mx-auto" type="primary">提交</el-button>
              <el-button class="mx-auto" type="primary">关闭</el-button>
            </el-form-item>
        </el-form>
        
    </div>
  
</template>

<script>
export default {
    name:"OnlinePost",

}
</script>

<style scoped>
.post-box {
  width: 500px;
  height: 500px;
  background-color:#bfbfbf;
  border-radius: 10%;
  left: 50%;
  top: 50%;
  transform: translate(70%, 50%);
}

.avatar_box {
  width: 130px;
  height: 130px;
  border: 1px solid #eeeeee;
  padding: 35px;
  border-radius: 50%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: -140px ;
  margin-left: 180px;
  background-color: #ffffff;
}
</style>